<template>
  <swiper class="icons">
    <swiper-slide>
      <div class="icon-content" v-for="item in list" :key="item.id">
        <div class="icon-img">
          <img :src="item.url" />
        </div>
        <p class="icon-context">{{ item.desc }}</p>
      </div>
    </swiper-slide>
  </swiper>
</template>

<script>
import icon1 from "../../../imgs/icon1.png";
import icon2 from "../../../imgs/icon2.png";
import icon3 from "../../../imgs/icon3.png";
import icon4 from "../../../imgs/icon4.png";
import icon5 from "../../../imgs/icon5.png";
import icon6 from "../../../imgs/icon6.png";
import icon7 from "../../../imgs/icon7.png";
import icon8 from "../../../imgs/icon8.png";
import icon9 from "../../../imgs/icon1.png";

export default {
  name: "HomeIcon",
  props: {
    list: Array,
  },

  computed: {
    page() {
      const pages = [];
      this.list.forEach((item, index) => {
        const page = Math.floor(index / 8);
        if (!pages[page]) {
          pages[page] = [];
        }
        pages[page].push(item);
      });
      return pages;
    },
  },
};
</script>

<style lang="stylus" scoped>
.icons >>> .swiper-slide {
  display: flex;
  flex-wrap: wrap;
  height: 0;
  padding-bottom: 51%;

  .icon-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 25%;
    height: 0;
    padding-bottom: 10%;
    padding-top: 15%;

    .icon-context {
      margin-top: 0.3rem;
    }
  }
}
</style>